<template>
	<view class="page-wraper">
		<view class="price_card" v-if="quotationInfo">
			<view class="view-box">
				<view class="price_title_view">
					<!-- <view class="gradient_view" style="position: absolute; z-index: inherit;"> -->
					<!-- </view> -->
					<text class="title">我的报价</text>
				</view>
			</view>
			<view style="margin-top: -10px; margin-right: 8px; margin-left: 8px; ">
				<view style="margin-left: 8px; flex-direction: row; display: flex;">
					<view class="" style="align-items: center; flex-direction: row; display: flex; flex: 1;">
						<view class="price_text">{{quotationInfo.quotation_price}}</view>
						<view class="uni_text">万</view>
						<view class="guide_text ">指导价：{{carInfo.guide_price}} </view>
					</view>
					<!-- <view class="time_text" style="text-align: center;">还剩5小时45分钟失效</view> -->
				</view>
				
				<view style="margin-top: 4px ;flex-direction: row; display: flex;">
					<text class="guide_text" style="color: #333333;">定金{{quotationInfo.deposit_price}}元</text>
					<!-- <text class="guide_text" style="color: #333333;">车在东区</text> -->
				</view>
				
				<view class="tag-group">
					<view class="price-tag" v-for="(item,index) in quotationInfo.label_name"  style="margin-top: 0px;">
						{{item}}
					</view>
				</view>
				<view class="" style="margin-bottom: 10px;"></view>
				
				<!-- <view class="logis_bar" style="align-items: center; display: flex;">
					<view class="black_text" style="margin-left: 14px;"> 物流参考价 </view>
					<view style="flex: 1;"></view>
					<view class="black_text" style="flex-direction: row; display: flex;"> 
						<text class="black_text">1400元起</text>
						<image class="right_btn" style=" padding-top: 1px; padding-left: 5px;padding-right: 10px;" src="/static/right_back.png" mode=""></image>
					</view>
				</view> -->
				
			</view>
			
		</view>
		
		<view class="find_card">
			<view class="price_title_view" style="">
				<!-- <view class="gradient_view" style="position: absolute; z-index: inherit;"></view> -->
				<text class="title">寻车信息</text>
			</view>
			
			<view style="margin-right:14px; margin-top: 10px; margin-left: 14px;">	
				<view class="subtitle_text">{{carInfo.model_name}}</view>
				<view class="find_left_text" style="margin-top:17px;">指导价：{{carInfo.guide_price}}</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">外观内饰</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">{{carInfo.appearance}}</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">上牌地区</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">{{carInfo.area}}</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">车龄</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">{{carInfo.car_age}}</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">里程</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">{{carInfo.mileage}}</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">预算</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">{{carInfo.budget_money}}</view>
				</view>
				<!-- <view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">有效期</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">黑/棕</view>
				</view> -->
				<!-- <view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">电话报价</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">黑/棕</view>
				</view> -->
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">发布时间</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">{{carInfo.create_time}}</view>
				</view>
				<view class="find_right_text" style="margin-top:13px;">
					备注信息
				</view>
				
				<view style="height: 10px;"></view>
				
				<view class="tag-group">
					<view class="tag" v-for="(item,index) in carInfo.notes"  style="margin-top: 0px;">
						{{item}}
					</view>
				</view>
				
				<view v-if="carInfo.describe" class="find_left_text" style="margin-top: 13px;">
					{{carInfo.describe}}
				</view>
				
				
				<view class="" style="margin-bottom: 20px;"></view>
			</view>
		</view>
		
		<view class="find_card">
			<view style="margin: 14px;">
				<view v-if="quotation.supplier_num" class="subtitle_text" style="margin-top: 5px; margin-bottom: 20px;">
					<text style="color: #416CD1;">{{quotation.supplier_num}}</text>
					家供应商参与了
					<text style="color: #416CD1;">{{quotation.quotation_num}}</text>
					报价
				</view>
					<view v-for="(item,index) in recordList" :key="index">
						<view class="content-row marginTop20">
							<view class="price_name" style="width: 50px;">{{item.release}}</view>
							<view class="price_num">参与{{item.quotation_num}}次报价</view>
							<view class="price_time">{{item.create_time}}</view>
						</view>
					</view>
	<!-- 				<view class="content-row marginTop20 marginBottom20">
						<view class="btn color-39 pad20 marginLeftRight20">报价上限</view>
						<view class="btn pad20 marginLeftRight20 color-white btnBg">了解会员</view>
					</view> -->
				</view>
				
				<view class="bottom-view">
					
					<!-- 1：会员进行报价 2：非会员等待报价 3：非会员进行报价 4：已报价 5：报价已到上限会员可继续报价 6：报价已到上限 -->
					<view class="btn_line" v-if="state == 1 || state == 3">
						<view @click="quote(state)" class="enter_btn_light" style="flex: 1;">
							我要报价
						</view>
					</view>
					
					<view class="btn_line" v-if="state == 2">
						<view @click="quote(state)"  class="enter_btn_light" style="flex-direction: column; display: flex; flex: 2;">
							会员优先报价中
							<text  class="guide_text">
								（剩余{{carInfo.quotation_time}}分钟）
							</text>
						</view>
						<view @click="gotoMember()" class="enter_btn" style="margin-left: 10px; flex: 1;">
							了解会员
						</view>
					</view>
					
					<view class="btn_line" v-if="state == 5 || state == 6">
						<view class="enter_btn_light" style="flex-direction: column; flex: 2;">
							<text>报价已达到上限</text>
							<text style="font-size: 11px; color: #333333;">会员可以继续报价</text>
						</view>
						<view class="enter_btn" style="margin-left: 10px; flex: 1;">
							了解会员
						</view>
					</view>
					

					
					<view class="btn_line" v-if="state == 4">
						<view @click="editQuato()" class="enter_btn_gray" style="flex: 1;">
							修改报价
						</view>
						<view @click="cancelQuato()" class="enter_btn_gray" style="margin-left: 10px; flex: 1;">
							取消报价
						</view>
						<view @click="gotoMember()" class="enter_btn" style="margin-left: 10px; flex: 1;">
							了解会员
						</view>
					</view>
				</view>
				
				<view style="margin-bottom: 20px;"></view>
			</view>

	</view>
</template>

<script>
	import uniListCarSource from '@/components/uniListCarSource/uniListCarSource.vue'
	import {getSearchCarDetail, isCarSearchModelsHave, cancelQuotation} from '@/api/secondhandCar.js'
	import {getPersonInfo} from '@/api/user.js'

	export default {
		components: {
			uniListCarSource
		},
		data() {
			return {
				quotedPriceDataList:[],
				carInfo: {},
				quotation: {},
				quotationInfo: {},
				recordList: [],
				state: "",
				userId: "",
				id: "",
				
				options:{}
			}
		},
		
		onShow() {
			this.refreshData()
		},
		

		onLoad:function(options) {
			this.options = options
			this.refreshData()
		},
		methods: {
			
			refreshData() {
				try {
					let options = this.options
					const value = uni.getStorageSync('login');
					if (value === '') {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						let userid = value.id
						this.userId = userid
						let id = options.id
						this.id = id
						let param = {
							"id" : id,
							"users_id": userid,
						}
						getSearchCarDetail(param)
						.then(res => {
							let code = res.code
							if (code == 0) {
								let data = res.data
								console.log("data ===========", JSON.stringify(data))
								console.log("quotation ===========", JSON.stringify(data.quotation))
								
								this.carInfo = data.info
								this.quotation = data.quotation
								this.state = data.info.quotation_status
								this.recordList = data.quotation.record
								this.quotationInfo = data.quotation_info
							}
						})
						.catch(e => {
							
						})
					}
					
				} catch (e) {
					// error
				}
			},
			
			editQuato() {
				const info = this.carInfo
				const quotationInfo = this.quotationInfo
				uni.navigateTo({
					url: '/pages/home/offer/submitOffer?model_id=' + info.model_two_id 
					+ '&model_name=' + info.model_name 
					+ '&car_search_id=' + info.id 
					+ '&guide_price=' + info.guide_price 
					+ '&edit=1' 
					+ '&quotation_id=' + quotationInfo.id
					+ '&budget_money=' + info.budget_money
				})
			},
			
			
			cancelQuato() {
				
				let users_id = this.userId
				let car_search_quotation_id = this.quotationInfo.id
				var that = this
				uni.showModal({
					title: '提示',
					content: "确定要取消报价？",
					confirmText: '确定',
					confirmColor: "#0E59EA",
					cancelText: '再想想',
					cancelColor: "#333333",
					success:function(res){
						if (res.confirm) {
							
							let param = {
								"users_id" : users_id,
								"car_search_quotation_id": car_search_quotation_id
							}
							
							
							cancelQuotation(param)
							.then(res => {
								if (res.code == 0) {
									uni.showToast({
										title:"已取消报价",
										icon: 'none'
									})
									setTimeout(() => {
									that.refreshData()
									}, 500)
								}
							})
						}
					}
				})
			},
			
			gotoMember() {
				uni.navigateTo({
					url: '/pages/user/member/member'
				})
			},
			
			quote(state) {
				// 先判定认证
				getPersonInfo(this.userId)
				.then(res => {
					let data = res.data
					let personAuth = false
					if (data.length == 0) {
						
					} else {
						let examine = data.examine
						if (examine == 1) {
							personAuth = true
						} else {
							personAuth = false
						}
					}
					
					if (personAuth) {
						// 再报价
						//1：会员进行报价 2：非会员等待报价 3：非会员进行报价 4：已报价 5：报价已到上限会员可继续报价 6：报价已到上限
						if (state == 2 || state == 6) {
							let contentText = "等待中，会员可优先报价"
							if (state == 6) {
								contentText = "报价已达到上线，会员可继续报价"
							}
							uni.showModal({
								title: '提示',
								content: contentText,
								confirmText: '了解会员',
								confirmColor: "#0E59EA",
								cancelText: '我知道了',
								cancelColor: "#333333",
								success:function(res){
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/user/member/member'
										})
									}
								}
							})
						}
						
						if (state == 1 || state == 3) { // 进入报价逻辑
							let is_quotation = this.carInfo.is_quotation
							if (is_quotation == 0) {
								uni.showModal({
									title: '提示',
									showCancel: false,
									content: "当前不可报价",
									// confirmText: '了解会员',
									confirmColor: "#0E59EA",
									cancelText: '我知道了',
									cancelColor: "#333333",
									success:function(res){
										// if (res.confirm) {
										// 	uni.navigateTo({
										// 		url: '/pages/user/member/member'
										// 	})
										// } 
									}
								})
								return
							}
						
						
							// 先判断车源
							let param = {
								"car_search_id" : this.id,
								"users_id" : this.userId
							}
							isCarSearchModelsHave(param)
							.then(res => {
								if (res.code == 0) {	// 进入报价
									const info = this.carInfo
									uni.navigateTo({
										url: '/pages/home/offer/submitOffer?model_id=' 
										+ info.model_two_id 
										+ '&model_name=' + info.model_name 
										+ '&car_search_id=' + info.id 
										+ '&guide_price=' + info.guide_price
										+ '&budget_money=' + info.budget_money
										+ '&edit=2'
									})
								} else if (res.code == 1060007) {
									const info = this.carInfo
									console.log("=====" + info)
									uni.showModal({
										title: '提示',
										content: res.message,
										confirmText: '发布车源',
										confirmColor: "#0E59EA",
										cancelText: '知道了',
										cancelColor: "#333333",
										success:function(res){
											if (res.confirm) {
												console.log("========" + info)
												uni.navigateTo({
													url: '/pages/home/secondhandCar/sendCarSource/sendCarSource?model_id=' + info.model_two_id + '&model_name=' + info.model_name + '&car_search_id=' + info.id
												})
											}
										}
									})
								} 
							})
							.catch(e => {
								
							})
							// 
						} 
					} else {
						
						uni.showModal({
							title: '提示',
							content: '需要先通过认证才能报价',
							confirmText: '去认证',
							confirmColor: "#0E59EA",
							cancelText: '我知道了',
							cancelColor: "#333333",
							success:function(res){
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/user/auth/auth'
									})
								}
							}
						})
					}
					
				})
				.catch(e => {
					console.log(e)
				})

			}
		}
	}
</script>

<style>
	page {
		background: linear-gradient(to bottom, #F0F0F0, #F0F0F0);
	}
	
		.content-row{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 30px;
			font-size: 14px;
			font-family: Source Han Sans CN;
			font-weight: 500;
		}
	
		.text-ccc {
			color: #838383;
		}
	
		.text-3E {
			color: #3E3E3E;
		}
		
		.color-39{
			color: #3957BF;
		}
	
	.price_name {
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}
	
	.price_num {
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #0E59EA;
		opacity: 1;
		/* margin-left: px; */
	}
	
	.price_time {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}
		
	.btn_line {
		display: flex; 
		margin-top: 10px;
		margin-right: 20px; 
		margin-left: 20px;
		
	}
	
	.enter_btn_gray {
		height: 42px;
		border: 1px solid #c7c7c7;
		border-radius: 7px;
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1C2125;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.enter_btn_light {
		height: 47px;
		background-color: #EDF1FF;
		opacity: 1;
		border-radius: 7px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #0E59EA;
	}
	
	.enter_btn {
		height: 47px;
		background: #0E59EA;
		opacity: 1;
		border-radius: 7px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-weight: 500;
		color: #FFFFFF;
		font-size: Source Han Sans CN;
		
	}
	
	.cancel_btn {
		height: 47px;
		margin: 34px 24px 80px 24px;
		background: #0E59EA;
		opacity: 1;
		border-radius: 7px;
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-size: 16px;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	.find_left_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}
	
	.find_right_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}
	
	.connect_btn {
		width: 90px;
		height: 30px;
		background: #0E59EA;
		opacity: 1;
		border-radius: 14px;
		margin-right: 10px;
		font-size: 12px;
		font-weight: 500;
		color: #FFFFFF;
	}
	

	
	.tag-group {
		display: flex;
		flex-wrap: wrap;
		margin-right: 50px;
		margin-bottom: 10px;
		margin-top: 6px;
	}
	
	.price-tag {
		background: #F4F4F4;
		opacity: 1;
		border-radius: 13px;
		font-size: 10px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5px 14px 5px 14px;
		margin: 6px;
	}
	
	.tag {
		/* width: 90px; */
		/* height: 27px; */
		background: #EDF1FF;
		border-radius: 14px;
		font-size: 12px;
		font-weight: 400;
		color: #0E59EA;
		/* display: flex; */
		/* justify-content: center; */
		/* align-items: center; */
		font-family: Source Han Sans CN;
		padding: 5px 14px 5px 14px;
		margin-right: 6px;
		opacity: 1;
	}
	
	.feeckback_btn {
		width: 90px;
		height: 30px;
		border: 1px solid #1C2125;
		border-radius: 14px;
		margin-right: 10px;
		
		font-size: 12px;
		font-weight: 500;
		color: #1C2125;
	}
	
	.right_btn {
		width: 7px;
		height: 13px;
	}
	
	
	.logis_bar {
		margin-top: 12px;
		height: 34px;
		background: rgba(230,237,253,1);
		border-radius: 0px;
	}
	
	.subtitle_text {
		font-size: 14px;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		font-family: Alimama ShuHeiTi;
	}
	
	.time_text {
		font-size: 12px;
		font-weight: 500;
		color: #ED2F2F;
		opacity: 1;
		/* background-color: red; */
	}
	
	.name_text {
		font-size: 11px;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}
	
	.black_text {
		font-size: 11px;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}
	
	.guide_text {
		margin-left: 14px;
		height: 19px;
		font-size: 11px;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}
	
	.price_text {
		height: 22px;
		font-size: 19px;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #ED2F2F;
		opacity: 1;
		margin-left: 5px;
	}
	
	.uni_text {
		height: 25px;
		font-family: DIN Alternate;
		font-weight: 500;
		opacity: 1;
		margin-left: 5px;
		font-size: 16px; 
		color: #333333;
		display:flex;
		align-items: center;
	}
	
	.primary_num {
		height: 22px;
		font-size: 12px;
		font-weight: 600;
		color: #FFFFFF;
		opacity: 1;
	}
	
	.price_card {
		margin: 7px 0px 0px 0px;
		height: auto;
		background-color: white;
		border-radius: 7px;
		font-family: PingFang SC;
	}
	
	.find_card {
		margin-top: 10px;
		background-color: white;
		height: auto;
		font-family: PingFang SC;
	}
	
	.title {
		font-size: 15px;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		font-family: Alimama ShuHeiTi;
	}
	
	.price_title_view {
		width: 150rpx;
		margin-top: 34rpx;
		margin-left: 30rpx;
		margin-bottom: 42rpx;
		background: url(/static/bac-small.png);
		background-size: 100% 100%; //背景图片能够显示全
	}
	
	

	.gradient_view {
		width: 150rpx;
		opacity: 0.79;
		margin-top: 34rpx;
		margin-left: 30rpx;
		margin-bottom: 42rpx;
		background: url(/static/bac-small.png);
		background-size: 100% 100%; //背景图片能够显示全
	}

	.page-wraper {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
	}
	.header-view-box {
		position: fixed;
		top: 10;
		width: 100%;
		z-index: 11;
	}

	.view-box {
		display: flex;
		background-color: white;
	}

	
</style>